<template>
  <div class="login_box">
    <div class="login_box_left"></div>
    <div class="login_box_right">
      <div class="login_box_right_top">
        <img class="dh" src="../assets/dh.jpg" alt="">
        <h2>你好 ！欢迎登录</h2>
      </div>
      <div class="login_box_right_bottom">
        <el-form ref="form" :model="loginForm" :rules="rules">
          <!-- 账号 -->
          <el-form-item prop="admin">
            <el-input placeholder="账号" type="admin" v-model="loginForm.admin"
              prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input placeholder="密码" type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"
              show-password></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item>
            <el-input prefix-icon="iconfont icon-dunpaibaoxianrenzheng_o" style="width:60%;" placeholder="验证码"
              v-model="loginForm.verify"></el-input>
            <div class="gverify" id="v_container" />
          </el-form-item>
          <el-form-item>
            <el-checkbox label="记住密码" name="type"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { GVerify } from '../utils/captcha/GVerify'
export default {
  name: "",
  data () {
    return {
      loginForm: {
        username: "",
        password: "",
        verify: "",
      },
      rules: {
        admin: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ]
      },
    }
  },
  mounted () {
    this.verifyCode = new GVerify('v_container')
  },
  methods: {
    submitForm () {
      this.$message.success('成功登陆');
      this.$router.push('/index')
    }
  }
}
</script>

<style lang="less"  scoped>
.login_box {
  display: flex;
  height: 100vh;
  width: 100vw;
}

// 左边
.login_box .login_box_left {
  background: url("../assets/lgbg.jpg"); //这里的地址是用你项目中图片所在的路径为准
  background-repeat: no-repeat; //将图片样式不重复
  background-size: 100% 100%; //设置图片大小
  width: 70%;
}

// 右边
.login_box .login_box_right {
  display: inline;
  width: 30%;
}

.login_box_right .login_box_right_top {
  height: 47%;
  width: 100%;
  position: relative;
  text-align: center;
  // border: 1px solid red;
}



.login_box_right .login_box_right_top h2 {
  position: absolute;
  bottom: 0px;
  padding: 0;
  margin-left: 5%;
  color: #cc1930;
}

.login_box_right .login_box_right_top .dh {
  padding-top: 5vh;
  width: 30vw;
  height: 35vh
}

.login_box_right .login_box_right_bottom {
  height: 53%;
  width: 80%;
  margin-left: 5%;
  // padding-top: 5vh;
}

.gverify {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}
</style>
